<template>
  <view class="mapContent">
    <map style="width: 702rpx; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
    </map>
    <view class="whiteBoard"></view>
  </view>
</template>
 
<script>
import deliveryman from '@/static/image/deliveryman.png'
import destination from '@/static/image/destination.png'
import amapFile from '@/utils/amap-wx.130.js';

export default {
  props: ['riderId', 'place'],
  data() {
    return {
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      // 纬度
      latitude: 32.14409,
      //经度
      longitude: 114.04541,
      // 配送员位置
      covers: [
        {
          id: 1,
          latitude: 32.14409,
          longitude: 114.04541,
          width: 35,
          height: 35,
          iconPath: deliveryman,
          callout: {
            content: '骑手未打开定位',
            color: '#000',
            fontSize: 12,
            borderRadius: 4,
            bgColor: '#fff',
            padding: 8,
            display: 'ALWAYS'
          }
        },
        {
          id: 2,
          latitude: this.place.latitude,
          longitude: this.place.longitude,
          width: 10,
          height: 10,
          iconPath: destination,
        }
      ],
      //设置高德地图的key
      myAmapFun: new amapFile.AMapWX({
        key: '46a14f6f07fe95c63948f5aa58f7eaea'
      }),

    }
  },
  created() {
    console.log(this.covers[1]);
    this.creationWebsocket()
  },
  destroyed() {
    // 关闭连接
    uni.closeSocket()
  },
  methods: {
    // 创建webSocket
    creationWebsocket() {
      let that = this
      // 连接Socket
      uni.connectSocket({
        url: 'wss://songcan.xyct1688.com/mapchat/user/' + this.riderId,
      });
      // 监听返回的消息
      uni.onSocketMessage(function (res) {
        let { latitude = 0, longitude = 0 } = JSON.parse(res.data) || {}
        console.log('收到服务器内容：', JSON.parse(res.data));
        that.covers[0].latitude = latitude
        that.covers[0].longitude = longitude
        // 计算外卖员距离终点的距离
        that.covers[0].callout.content = that.getDistance(latitude, longitude)
      });
    },

    // 计算配送员到目的地之间的距离
    getDistance(lat1, lon1) {
      const earthRadius = 6371; // 地球半径（单位：千米）
      // 将经纬度转换为弧度
      const radLat1 = (Math.PI / 180) * lat1;
      const radLon1 = (Math.PI / 180) * lon1;
      const radLat2 = (Math.PI / 180) * this.covers[1].latitude;
      const radLon2 = (Math.PI / 180) * this.covers[1].longitude;

      // 差值
      const diffLat = radLat2 - radLat1;
      const diffLon = radLon2 - radLon1;

      // 根据Haversine公式计算距离
      const a = Math.sin(diffLat / 2) ** 2 + Math.cos(radLat1) * Math.cos(radLat2) * Math.sin(diffLon / 2) ** 2;
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      const distance = earthRadius * c;
      // 大于一千米则返回公里
      if (distance > 1) {
        return `距离${distance.toFixed(1)}公里` // 返回距离（单位：千米米）
      } else {
        return `距离${distance * 1000}米`; // 返回距离（单位：米）
      }

    },
  }
}
</script>

<style  scoped>
.mapContent {
  position: relative;
}

.whiteBoard {
  height: 20px;
  width: 702rpx;
  background: #fbfbfb;
  position: absolute;
  bottom: 0;
}
</style>